/* 主题颜色 */
$uni-primary: #3872FE;
$uni-primary-disable: #9bb6f9;
$uni-primary-light: #ecf3ff;

/* 背景颜色 */
$uni-bg-color: #f5f5f5;
$uni-bg-color-white: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1;
$uni-bg-color-mask: rgba(0, 0, 0, 0.4);

/* 文字颜色 */
$uni-text-color: #333333;
$uni-text-color-grey: #666666;
$uni-text-color-light: #999999;
$uni-text-color-disable: #c0c0c0;
$uni-text-color-white: #ffffff;

/* 边框颜色 */
$uni-border-color: #e5e5e5;
$uni-border-color-light: #f0f0f0;

/* 尺寸变量 */
$uni-font-size-sm: 24rpx;
$uni-font-size-base: 28rpx;
$uni-font-size-lg: 32rpx;
$uni-font-size-xl: 36rpx;

/* 图片尺寸 */
$uni-img-size-sm: 40rpx;
$uni-img-size-base: 52rpx;
$uni-img-size-lg: 80rpx;

/* 行高 */
$uni-line-height-sm: 36rpx;
$uni-line-height-base: 44rpx;
$uni-line-height-lg: 56rpx;

/* 间距 */
$uni-spacing-sm: 8rpx;
$uni-spacing-base: 16rpx;
$uni-spacing-lg: 24rpx;
$uni-spacing-xl: 32rpx;
$uni-spacing-row: 30rpx;
$uni-spacing-col: 20rpx;

/* 圆角 */
$uni-radius-sm: 4rpx;
$uni-radius-base: 8rpx;
$uni-radius-lg: 12rpx;
$uni-radius-circle: 50%;

/* 阴影 */
$uni-shadow-sm: 0 0 5rpx rgba(0, 0, 0, 0.1);
$uni-shadow-base: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
$uni-shadow-lg: 0 1rpx 10rpx rgba(0, 0, 0, 0.1);

/* 透明度 */
$uni-opacity-disabled: 0.3;

/* 文章场景相关 */
$uni-color-title: #2c405a;
$uni-font-size-title: 40rpx;
$uni-color-subtitle: #555555;
$uni-font-size-subtitle: 36rpx;
$uni-color-paragraph: #3f536e;
$uni-font-size-paragraph: 30rpx;

/* 混入样式 */
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin multi-ellipsis($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@mixin safe-area {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 常用样式类 */
.flex-center {
  @include flex-center;
}

.flex-between {
  @include flex-between;
}

.flex-column {
  @include flex-column;
}

.text-ellipsis {
  @include text-ellipsis;
}

.safe-area {
  @include safe-area;
}